<template>
  <el-calendar v-model="value">
    <template slot="header">
      <div class="custom-header">
        <span>{{ currentMonthYear }}</span>
        <el-button type="text" @click="prevMonth">《</el-button>
        <el-button type="text" @click="nextMonth">》</el-button>
      </div>
    </template>
    <template slot-scope="{ date }">
      <div :class="{ 'selected-date': isSelected(date) }" @click="selectDate(date)">
        {{ formatDate(date) }}
      </div>
    </template>
  </el-calendar>
</template>
<script>
export default {
  name: 'MyElcalendar',
  data() {
    return {
      value: new Date(),
      selectedDate: null
    };
  },
  computed: {
    currentMonthYear() {
      const date = this.value;
      return `${date.getFullYear()}年${date.getMonth() + 1}月`;
    }
  },
  methods: {
    prevMonth() {
      console.log("上")
      this.value.setMonth(this.value.getMonth() - 1);
    },
    nextMonth() {
      console.log("下")
      this.value.setMonth(this.value.getMonth() + 1);
    },
    formatDate(date) {
      return date.getDate();
    },
    isSelected(date) {
      return this.selectedDate && this.selectedDate.toDateString() === date.toDateString();
    },
    selectDate(date) {
      console.log("date",date)
      this.selectedDate = date;
    }
  }
};
</script>
<style scoped="scoped">
.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.selected-date {
  color: blue;
}
</style>
<!--Element UI 的 Calendar（日历）组件提供了多种功能和自定义选项，除了上述的基本用法和自定义内容外，还有其他一些高级用法和特性。以下是更详细的 Element UI Calendar 使用教程：-->

<!--1. 显示特定日期-->
<!--你可以通过 v-model 绑定一个特定的日期，使得日历默认显示该日期。例如，如果你想让日历默认显示 2023 年 1 月 1 日，可以这样做：-->

<!--<template>-->
<!--  <el-calendar v-model="value"></el-calendar>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      value: new Date(2023, 0, 1) // 注意月份是从 0 开始计数的，所以 0 代表一月-->
<!--    };-->
<!--  }-->
<!--};-->
<!--</script>-->
<!--2. 禁用日期-->
<!--你可以通过 disabled-date 属性来禁用某些日期。这个属性接受一个函数，该函数返回 true 表示日期不可选，返回 false 表示日期可选。-->

<!--<template>-->
<!--  <el-calendar :disabled-date="disabledDate"></el-calendar>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  methods: {-->
<!--    disabledDate(date) {-->
<!--      // 禁用所有周末-->
<!--      const day = date.getDay();-->
<!--      return day === 0 || day === 6; // 0 表示周日，6 表示周六-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->
<!--3. 自定义日期类名-->
<!--你可以通过 date-cell-class-name 属性为每个日期单元格指定一个类名，从而应用自定义样式。-->

<!--<template>-->
<!--  <el-calendar :date-cell-class-name="dateCellClassName"></el-calendar>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  methods: {-->
<!--    dateCellClassName(date) {-->
<!--      // 为周末的日期添加特殊类名-->
<!--      const day = date.getDay();-->
<!--      return day === 0 || day === 6 ? 'weekend' : '';-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->

<!--<style>-->
<!--.weekend {-->
<!--  background-color: #f5caca;-->
<!--}-->
<!--</style>-->
<!--4. 显示周数-->
<!--通过设置 show-week-number 属性为 true，可以在日历中显示每周的周数。-->

<!--<template>-->
<!--  <el-calendar v-model="value" show-week-number></el-calendar>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      value: new Date()-->
<!--    };-->
<!--  }-->
<!--};-->
<!--</script>-->
<!--5. 自定义周的起始日-->
<!--默认情况下，周的起始日是周日。你可以通过 first-day-of-week 属性来设置周的起始日。-->

<!--<template>-->
<!--  <el-calendar v-model="value" :first-day-of-week="1"></el-calendar>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      value: new Date()-->
<!--    };-->
<!--  }-->
<!--};-->
<!--</script>-->
<!--在这个例子中，first-day-of-week 设置为 1，表示周的起始日是周一。-->

<!--6. 多语言支持-->
<!--Element UI 支持国际化，你可以通过引入相应的语言包来改变日历的语言。-->

<!--javascript-->
<!--import Vue from 'vue';-->
<!--import ElementUI from 'element-ui';-->
<!--import locale from 'element-ui/lib/locale/lang/en'; // 引入英文语言包-->

<!--Vue.use(ElementUI, { locale });-->
<!--7. 事件处理-->
<!--除了 current-change 事件外，日历组件还提供了其他事件，如 select 和 unselect，分别在用户选择和取消选择日期时触发。-->

<!--<template>-->
<!--  <el-calendar v-model="value" @select="handleSelect" @unselect="handleUnselect"></el-calendar>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      value: new Date()-->
<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    handleSelect(date) {-->
<!--      console.log('选择了日期：', date);-->
<!--    },-->
<!--    handleUnselect(date) {-->
<!--      console.log('取消了日期：', date);-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->
<!--8. 自定义日期范围-->
<!--你可以通过 range 属性来限制用户可以选择的日期范围。-->

<!--<template>-->
<!--  <el-calendar v-model="value" :range="[new Date(2023, 0, 1), new Date(2023, 11, 31)]"></el-calendar>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      value: new Date()-->
<!--    };-->
<!--  }-->
<!--};-->
<!--</script>-->
<!--在这个例子中，用户只能选择 2023 年的日期。-->

<!--9. 自定义日期格式-->
<!--你可以通过 format 属性来设置日历中日期的显示格式。-->

<!--<template>-->
<!--  <el-calendar v-model="value" format="YYYY-MM-DD"></el-calendar>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      value: new Date()-->
<!--    };-->
<!--  }-->
<!--};-->
<!--</script>-->
<!--在这个例子中，日历中的日期将以 "年-月-日" 的格式显示。-->

<!--10. 自定义日期单元格内容-->
<!--除了在 slot-scope 中自定义日期单元格的内容外，你还可以通过 date-render 属性来完全自定义每个日期单元格的渲染。-->

<!--<template>-->
<!--  <el-calendar v-model="value" :date-render="dateRender"></el-calendar>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      value: new Date()-->
<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    dateRender(h, { date, data }) {-->
<!--      return h('div', { style: { color: 'red' } }, date.getDate());-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->
<!--在这个例子中，dateRender 是一个函数，它返回一个 VNode，用于渲染每个日期单元格。-->

<!--总结-->
<!--Element UI 的 Calendar 组件提供了丰富的功能和灵活的自定义选项，可以满足大多数日历显示和交互的需求。通过上述的教程，你应该能够掌握如何使用 Element UI 的 Calendar 组件，并根据需要进行自定义。记得查阅 Element UI 的官方文档，以获取最新的信息和更详细的 API 说明。-->
